<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <% if(product){%>
      <form class="update" action="/admin/update/<%=id%>" method="post" enctype="multipart/form-data">
        <input type="text" name="name" placeholder="name" value="<%=product.name%>"><br>
        <input type="text" name="information" placeholder="description" value="<%=product.information%>"><br>
        <input type="text" name="price"  placeholder="price" value="<%=product.price%>"><br>
        <input type="file" name="image" value="change"><br>
        <img style="width:100px;height:100px;" src="/admin/img/<%=product.file.filename%>" alt="">
        <input type="submit" name="" value="submit">
      </form>
    <%} else{%>
      <form class="create" action="/admin/upload" method="post" enctype="multipart/form-data">
        <input type="text" name="name" placeholder="name" value=""><br>
        <input type="text" name="information" placeholder="description" value=""><br>
        <input type="text" name="price"  placeholder="price" value=""><br>
        <input type="file" name="image" value=""><br>
        <img style="width:100px;height:100px;" src="" alt="">
        <input type="submit" name="" value="submit">
        </form>

    <%}%>
    <script type="text/javascript">
      const createFormDOM = document.querySelector(".create");
      const createImg = createFormDOM.querySelector("img");
      const createUpFileDOM = createFormDOM.querySelector("input[type='file']");
      createUpFileDOM.addEventListener("change", function(event){
        const file = createUpFileDOM.files[0];
        const fr = new FileReader();
        fr.onload = function(){
          createImg.src = fr.result;
        }
        fr.readAsDataURL(file);
      });


      const updateFormDOM = document.querySelector(".update");
      const updateImg = updateFormDOM.querySelector("img");
      const updateUpFileDOM = updateFormDOM.querySelector("input[type='file']");
      updateUpFileDOM.addEventListener("change", function(event){
        const file = updateUpFileDOM.files[0];
        const fr = new FileReader();
        fr.onload = function(){
          updateImg.src = fr.result;
        }
        fr.readAsDataURL(file);
      });

    </script>
  </body>
</html>
